import React, { useState, useMemo } from 'react';
import { Plus } from 'lucide-react';
import { Button } from '../components/ui/Button';
import { SearchInput } from '../components/ui/SearchInput';
import { BoxCard } from '../components/boxes/BoxCard';
import { AddBoxModal } from '../components/boxes/AddBoxModal';
import { useTranslation } from 'react-i18next';
import type { Box, Snack } from '../types';

export default function BoxManagement() {
  const [searchTerm, setSearchTerm] = useState('');
  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
  const { t } = useTranslation();

  const MOCK_SNACKS = useMemo<Snack[]>(() => [
    { 
      id: '1', 
      name: t('零食.品类.巧克力'), 
      price: 5, 
      stock: 10, 
      image: 'https://images.unsplash.com/photo-1511381939415-e44015466834?w=400',
      description: t('零食.品类.黑巧克力')
    },
    { 
      id: '2', 
      name: t('零食.品类.薯片'), 
      price: 3, 
      stock: 15, 
      image: 'https://images.unsplash.com/photo-1566478989037-eec170784d0b?w=400',
      description: t('零食.品类.原味')
    },
    { 
      id: '3', 
      name: t('零食.品类.饼干'), 
      price: 4, 
      stock: 20, 
      image: 'https://images.unsplash.com/photo-1499636136210-6f4ee915583e?w=400',
      description: t('零食.品类.巧克力味')
    },
    { 
      id: '4', 
      name: t('零食.品类.糖果'), 
      price: 2, 
      stock: 30, 
      image: 'https://images.unsplash.com/photo-1581798459919-5c8dd45f51c7?w=400',
      description: t('零食.品类.混合口味')
    },
  ], [t]);

  const MOCK_BOXES = useMemo<Box[]>(() => [
    {
      id: '1',
      roomNumber: '101',
      name: t('盒子.预设.甜点角'),
      snacks: [MOCK_SNACKS[0], MOCK_SNACKS[1]]
    },
    {
      id: '2',
      roomNumber: '102',
      name: t('盒子.预设.零食天堂'),
      snacks: [MOCK_SNACKS[2]]
    },
  ], [t, MOCK_SNACKS]);

  const [boxes] = useState<Box[]>(MOCK_BOXES);

  const filteredBoxes = boxes.filter(box => 
    box.roomNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
    box.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">{t('盒子.标题')}</h1>
        <Button icon={Plus} onClick={() => setIsAddModalOpen(true)}>
          {t('盒子.添加盒子')}
        </Button>
      </div>

      <SearchInput
        placeholder={t('盒子.搜索盒子')}
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />

      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {filteredBoxes.map(box => (
          <BoxCard key={box.id} box={box} />
        ))}
      </div>

      <AddBoxModal
        isOpen={isAddModalOpen}
        onClose={() => setIsAddModalOpen(false)}
        availableSnacks={MOCK_SNACKS}
      />
    </div>
  );
}